<template>
<el-card class="setting">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-tabs v-model="tabs">
            <el-tab-pane name="common" label="公共配置">
                <el-form-item label="文件排除" prop="common.exclude">
                    <el-select multiple filterable allow-create v-model="form.common.exclude" placeholder="请选择要排除的文件夹/文件">
                        <el-option value="node_modules">node_modules</el-option>
                        <el-option value="dist">dist</el-option>
                        <el-option value=".git">.git</el-option>
                    </el-select>
                </el-form-item>  
            </el-tab-pane>
            <el-tab-pane name="baidu" label="百度翻译">
                <el-form-item label="AppID" prop="baidu.appid">
                    <el-input v-model="form.baidu.appid" placeholder="请输入AppID" />
                </el-form-item>
                <el-form-item label="Secret" prop="baidu.secret">
                    <el-input v-model="form.baidu.secret" placeholder="请输入App Secret" />
                </el-form-item>  
            </el-tab-pane>
        </el-tabs>
        <el-form-item>
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-form-item>
    </el-form>
</el-card>
</template>

<script lang="ts" setup>
// @ts-ignore
import { getStoreConfig, setStoreConfig } from "@renderer/utils";
import { FormInstance, ElNotification, FormRules } from "element-plus";


const tabs = ref<string>('common')
const form = ref<ApplicationStoreConfig>({
    common: {
        exclude: []
    },
    baidu: {
        appid: '',
        secret: ''
    }
})

const formRef = ref<FormInstance>()

const rules: FormRules = {
    
}

function onSave(){
    formRef.value?.validate(async valid => {
        if(!valid){
             ElNotification({ type: 'error', title: '操作失败', message: '请填写完整'})
             return
        }
        await setStoreConfig(toRaw(form.value))
        ElNotification({ type: 'success', title: '操作成功', message: '保存成功'})
    })
}

onMounted(async () => {
    const config = await getStoreConfig()
    form.value = config
})

</script>


<style lang="scss" scoped>
.setting{
    height: 100%;
}
</style>